<template>
	<view style="height:100vh">
		<layout layoutTitle="双碳配置">
			<view class="config-container">
				<a-card title="双碳系统配置" class="config-card">
					<template #title>
						<view class="card-title">
							<view class="title-icon">🌿</view>
							<text>双碳系统配置</text>
						</view>
					</template>
					
					<view class="intro-box">
						<text class="intro-text">配置碳排放换算系数，用于准确计算企业碳足迹</text>
					</view>
					
					<a-form :model="form" layout="vertical">
						<view class="form-grid">
							<a-form-item label="二氧化碳与碳比值" class="form-item">
								<view class="input-group">
									<a-input-number v-model:value="form.co2ToCarbonRatio" :min="0" class="input-field" />
									<view class="unit-label">比值</view>
								</view>
								<view class="hint-text">碳元素转化为CO₂的理论换算比值</view>
							</a-form-item>
							
							<a-form-item label="1 度电释放碳排量" class="form-item">
								<view class="input-group">
									<a-input-number v-model:value="form.electricityEmission" :min="0" class="input-field" />
									<view class="unit-label">kg CO₂</view>
								</view>
								<view class="hint-text">根据电网清洁度和能源结构计算</view>
							</a-form-item>
							
							<a-form-item label="1 吨水处理碳排量" class="form-item">
								<view class="input-group">
									<a-input-number v-model:value="form.waterEmission" :min="0" class="input-field" />
									<view class="unit-label">kg CO₂</view>
								</view>
								<view class="hint-text">包含取水、运输、净化处理全流程</view>
							</a-form-item>
							
							<a-form-item label="1 KG 汽油碳排量" class="form-item">
								<view class="input-group">
									<a-input-number v-model:value="form.gasolineEmission" :min="0" class="input-field" />
									<view class="unit-label">kg CO₂</view>
								</view>
								<view class="hint-text">基于标准油品碳含量计算</view>
							</a-form-item>
						</view>
						
						<view class="carbon-info">
							<view class="carbon-info-title">
								<uni-icons type="info-filled" color="#27ae60" size="16"></uni-icons>
								<text>碳足迹测算基准</text>
							</view>
							<text class="carbon-info-text">配置的各项系数将用于系统内能源消耗转换为碳排放量的计算，影响碳足迹报告数据准确性</text>
						</view>
						
						<a-form-item>
							<button type="primary" @click="saveConfig" class="save-button">
								<text class="button-icon">🌱</text>
								<text>保存配置</text>
							</button>
						</a-form-item>
					</a-form>
				</a-card>
			</view>
		</layout>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		message
	} from 'ant-design-vue';

	const form = ref({
		co2ToCarbonRatio: 3.67,
		electricityEmission: 0.527,
		waterEmission: 0.344,
		gasolineEmission: 2.31,
	});

	const saveConfig = () => {
		// 这里可以添加实际的保存逻辑，例如存入数据库或本地存储
		message.success('配置已保存');
	};
</script>

<style scoped>
	.config-container {
		padding: 30rpx;
		min-height: 100vh;
		background: linear-gradient(165deg, #f6fbf8, #e8f5f0);
	}

	.config-card {
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(39, 174, 96, 0.12);
		overflow: hidden;
		border: 1px solid rgba(39, 174, 96, 0.1);
		animation: fadeIn 0.5s ease forwards;
	}
	
	.card-title {
		display: flex;
		align-items: center;
		gap: 12rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.title-icon {
		font-size: 40rpx;
	}
	
	.intro-box {
		padding: 24rpx;
		background: linear-gradient(145deg, rgba(39, 174, 96, 0.05), rgba(46, 204, 113, 0.02));
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		border-left: 6rpx solid #27ae60;
	}
	
	.intro-text {
		font-size: 28rpx;
		color: #4a6572;
		line-height: 1.6;
	}
	
	.form-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350rpx, 1fr));
		gap: 30rpx;
		margin-bottom: 40rpx;
	}
	
	.form-item {
		margin-bottom: 0;
	}
	
	:deep(.ant-form-item-label > label) {
		color: #2c3e50;
		font-weight: 500;
		font-size: 28rpx;
	}
	
	.input-group {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}
	
	.input-field {
		flex: 1;
	}
	
	:deep(.ant-input-number) {
		width: 100%;
		border-radius: 12rpx;
		border: 1px solid rgba(39, 174, 96, 0.2);
	}
	
	:deep(.ant-input-number:focus),
	:deep(.ant-input-number-focused) {
		border-color: #27ae60;
		box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
	}
	
	.unit-label {
		min-width: 80rpx;
		font-size: 26rpx;
		color: #7f8c8d;
	}
	
	.hint-text {
		font-size: 24rpx;
		color: #95a5a6;
		margin-top: 8rpx;
	}
	
	.carbon-info {
		background: #f6fbf8;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 40rpx;
		border: 1px solid rgba(39, 174, 96, 0.1);
	}
	
	.carbon-info-title {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #27ae60;
	}
	
	.carbon-info-text {
		font-size: 26rpx;
		color: #4a6572;
		line-height: 1.6;
	}
	
	.save-button {
		width: 100%;
		height: 90rpx;
		border-radius: 16rpx;
		background: linear-gradient(145deg, #27ae60, #2ecc71);
		border: none;
		color: white;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		box-shadow: 0 8rpx 16rpx rgba(39, 174, 96, 0.2);
		transition: all 0.3s ease;
	}
	
	.save-button:active {
		transform: translateY(2rpx);
		background: linear-gradient(145deg, #219654, #25a65c);
	}
	
	.button-icon {
		font-size: 32rpx;
	}
	
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	
	@media (max-width: 768px) {
		.form-grid {
			grid-template-columns: 1fr;
		}
	}
</style>